<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="a in arr">{{a}}</li>
        </ul>
        <ul>
            <li v-for="(value,index) in arr">{{index+":"+value}}</li>
        </ul>

        <ol>
            <li v-for="(value,key) in user">{{key+":"+value}}</li>
            <li v-for="(value,key,index) in user">{{index+":"+key+":"+value}}</li>
        </ol>

        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="a in users">
                <td>{{a.id}}</td>
                <td>{{a.name}}</td>
                <td>{{a.age}}</td>
                <td>{{a.sex}}</td>
            </tr>
        </table>

    </div>
</body>
<script>
    new Vue({
       el:"#app",
       data:{
           arr: ["许凯","帕","菜"],
           user:{
               id: 1,
               name: "张三",
               age: 18,
               sex: "男"
           },
           users: [
               {
                   id: 1,
                   name: "张三",
                   age: 18,
                   sex: "男"
                },
               {
                   id: 2,
                   name: "lisi",
                   age: 17,
                   sex: "男"
               },
               {
                   id: 3,
                   name: "wangwu",
                   age: 16,
                   sex: "男"
               },
               {
                   id: 4,
                   name: "xuliu",
                   age: 15,
                   sex: "男"
               }]

       }
    });
</script>
</html>